<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Device Detail
            </ui:define>

            <ui:define name="content">
                <f:metadata>
                    <f:viewParam name="deviceid" value="#{deviceDetailBean.deviceid}" />
                </f:metadata>
                <script type="text/javascript" >
                    $(document).ready(function(){
                        $('#edit').hide();
                    });
                    $(document).ready(function(){
                        $('#btne').click(function(){
                            $('#edit').show();
                            $('#detail').hide();
                        });
                    });
                    $(document).ready(function(){
                        if($('#name').val()==""||$('#desc').val()==""){
                            $('#edit').show();
                            $('#detail').hide();
                        }
                    });
                </script>
                <h:form prependId="false">
                    <div id="detail">
                        <table align="center" width="500px">
                            <tr>
                                <td colspan="2" align="center"><h3>Device Detail</h3></td>
                            </tr>
                            <tr>
                                <td colspan="2"><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></td>
                            </tr>
                            <tr>
                                <td>Device Name</td>
                                <td>#{deviceDetailBean.device.devicename}</td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td>#{deviceDetailBean.device.labID.labname}</td>
                            </tr>
                            <tr>
                                <td>Create Date</td>
                                <td><h:outputText value="#{deviceDetailBean.device.createDate}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td>#{deviceDetailBean.device.description}</td>
                            </tr>
                            <tr>
                                <td>isProlem</td>
                                <td><h:outputText value="#{deviceDetailBean.device.isProlem}">
                                        <f:converter converterId="Prolem" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td><h:outputText value="#{deviceDetailBean.device.status}">
                                        <f:converter converterId="UserStatus" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><input type="button" value="Edit Device" id="btne" /></td>
                            </tr>
                        </table>
                    </div>
                    <div id="edit">
                        <table align="center" width="600px">
                            <tr>
                                <td colspan="2" align="center"><h3>Edit Device</h3></td><td></td>
                            </tr>
                            <tr>
                                <td>Lab Name</td>
                                <td><h:selectOneMenu id="lab" value="#{deviceDetailBean.labid}" required="true" requiredMessage="Lab Name empty !">
                                        <f:selectItems value="#{deviceDetailBean.labs}" var="l" itemLabel="#{l.labname}" itemValue="#{l.labID}" />
                                    </h:selectOneMenu></td>
                                <td><p:message for="lab" /></td>
                            </tr>
                            <tr>
                                <td>Device Name</td>
                                <td><h:inputText id="name" value="#{deviceDetailBean.devicename}" required="true" requiredMessage="Device Name invalid !" /></td>
                                <td><p:message for="name" /></td>
                            </tr>
                            <tr>
                                <td>Description</td>
                                <td><h:inputTextarea value="#{deviceDetailBean.description}" required="true" requiredMessage="Description invalid !" id="desc" /></td>
                                <td><p:message for="desc" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><h:commandButton value="Change Device" action="#{deviceDetailBean.resultEdit}" /></td>
                            </tr>
                            
                        </table>
                    </div>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
